<template>
	<transition name="todo" appear>
		<li>
		<label>
			<input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)">
			<!-- 如下代码也能实现功能 但是不太推荐，因为有点违反原则 修改了props -->
			<!-- props里面的数据是来源于父组件 操作props里面但是数据实际上是在操作父组件的数据 
			所以可以通过传递函数的方法改变数据 -->
			<!-- <input type="checkbox" v-model="todo.done"> -->
			<span v-show="!todo.isEdit">{{todo.title}}</span>
					<input type="text" v-show="todo.isEdit" :value="todo.title" @blur="handleBlur(todo, $event)" ref="inputTitle">
		</label>
		<button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
				<button class="btn btn-edit" @click="handleEdit(todo)" v-show="!todo.isEdit">编辑</button>
		</li>
	</transition>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
  name: 'Item',
//   props: ['todo', 'checkTodo', 'deleteTodo'],//接受todo对象
  props: ['todo'],
  mounted() {
    // console.log(this,'看一下list传过来的todo')
  },
  methods: {
    handleCheck(id) {
    //   this.checkTodo(id)
		this.$bus.$emit('checkTodo', id)
    },
		handleDelete(id) {
			if(confirm('确认删除吗？')) {
				// this.deleteTodo(id)
				// this.$bus.$emit('deleteTodo', id)
				pubsub.publish('deleteTodo', id)
			}
		},
		handleEdit(todo) {
			// todo.isEdit = true //这样不行哦 vue不会帮你监听
			if(todo.isEdit === undefined) {
				this.$set(todo, 'isEdit', true)//使用$set给todo追加属性 没有就追加属性  有就直接该
				// console.log(1);
			} else {
				todo.isEdit = true
				// console.log(2);
			}
			// this.$refs.inputTitle.focus()//这样写不能实现效果 因为Vue会吧这个函数的所有代码走一遍在去重新解析模板 现在input是display 调用focus没用
			/* this.$nextTick(function() {

			})
			// nextTick这个函数传一个回调函数 这个回调函数会在下一次模板解析完成后调用 
			*/
			this.$nextTick(function() {
				this.$refs.inputTitle.focus()
			})
		},
		// 失去焦点回调 真正执行修改逻辑
		handleBlur(todo, e) {
			todo.isEdit = false
			// console.log(e);
			// console.log(e.target.value);
			if(!e.target.value.trim()) return alert('输入不能为空')
			this.$bus.$emit('updateTodo', todo.id, e.target.value)
		}
  },
}
</script>

<style scoped>
/*item*/
	li {
		list-style: none;
		height: 36px;
		line-height: 36px;
		padding: 0 5px;
		border-bottom: 1px solid #ddd;
	}

	li label {
		float: left;
		cursor: pointer;
	}

	li label li input {
		vertical-align: middle;
		margin-right: 6px;
		position: relative;
		top: -1px;
	}

	li button {
		float: right;
		display: none;
		margin-top: 3px;
	}

	li:before {
		content: initial;
	}

	li:last-child {
		border-bottom: none;
	}

	li:hover{
		background-color: #ddd;
	}
	
	li:hover button{
		display: block;
	}
	li:hover {
		background-color: #ddd;
	}
	li:hover button {
		display: block;
	}
	.todo-enter-active {
		animation: todoTransition 0.5s linear;
	}
	.todo-leave-active {
		animation: todoTransition 0.5s linear reverse;
	}
	@keyframes todoTransition {
		from {
			transform: translateX(100%);
		}
		to {
			transform: translateX(0px);
		}
	}
</style>
